<template>
  <div class="video-info">
    <div class="head">
      <van-tag v-if="isHot" class="hot" round ><i class="fa fa-hot"></i>热门</van-tag>
      <van-tag v-else-if="missionId > 0" class="hot" round >活动</van-tag>
      <h1 class="title" @click="toggleDetail" :class="{'title-expand': expand}">{{ title }}</h1>
      <span @click="toggleDetail"><i class="fa" :class="[expand?'fa-dropup':'fa-dropdown']"></i></span>
    </div>
    <div class="body">
      <span class="author" @click="toSpace"><i class="fa fa-up-zhu"></i><span>{{ author }}</span></span>
      <span>{{ review | formatNumber }}次观看</span>
      <span>{{ danmaku | formatNumber }}弹幕</span>
      <span>{{ pubdate | formatDate }}</span>
    </div>
    <div class="foot" :style="footStyle">
      <div class="foot-content" id="footContent">
        <span class="copyright"><i class="fa fa-ban ban"></i> 未经作者授权禁止转载</span>
        <span class="desc">{{ description }}</span>
        <div class="tags">
          <van-tag
            class="vtag"
            v-for="tag in tags"
            :key="tag.tag_id"
            round
            @click="onTagClick(tag)"
          >
            {{ tag.tag_name }}
          </van-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatNumber, formatDate } from '@/filters/filters.js'
import { Tag as VanTag } from 'vant'
export default {
  name: 'VideoInfo',
  components: {
    VanTag
  },
  props: {
    // 视频信息
    info: {
      type: Object
    },
    tags: {
      type: Array
    }
  },
  data () {
    return {
      expand: false,
      footStyle: 'height:0'
    }
  },
  computed: {
    hasInfo () {
      return this.info || false
    },
    // 作者id
    mid () {
      return this.hasInfo && this.info.owner.mid
    },
    title () {
      return this.hasInfo && this.info.title
    },
    author () {
      return this.hasInfo && this.info.owner.name
    },
    description () {
      return this.hasInfo && this.info.desc
    },
    pubdate () {
      return this.hasInfo && this.info.pubdate
    },
    danmaku () {
      return this.hasInfo && this.info.stat.danmaku
    },
    review () {
      return this.hasInfo && this.info.stat.view
    },
    isHot () {
      return this.info && this.info.label && this.info.label.type === 1
    },
    missionId () {
      return this.info && this.info.mission_id
    }
  },
  filters: {
    formatNumber,
    formatDate
  },
  methods: {
    toggleDetail () {
      this.expand = !this.expand
      if (this.expand) {
        const height = window.getComputedStyle(document.querySelector('#footContent')).height
        this.footStyle = `height:${height}`
      } else {
        this.footStyle = 'height:0'
      }
    },
    toSpace () {
      this.$router.push({ name: 'space', params: { mid: this.mid } })
    },
    onTagClick (tag) {
      this.$router.push({ name: 'tag', params: { tid: tag.tag_id, cover: tag.cover } })
    }
  }
}
</script>

<style lang="scss" scoped>
  .video-info{
    margin-top: 10px;
    padding: {
      left: 10px;
      right: 10px;
    };
    .head{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .hot{
      margin-right: 5px;
      background-color: #f4f4f4;
      color: $theme-color;
      .fa{
        margin-right: 5px;
        font-size: 14px;
      }
    }
    .title{
      margin: 0;
      flex: 1;
      font: {
        size: 16px;
        weight: 400;
      }
      color: $color-text-primary;
      @include max-lines(1);
      &-expand{
        display: block;
        white-space: normal;
      }
    }
    .body{
      display: flex;
      align-items: center;
      margin-top: 8px;
      font-size: 12px;
      color: $color-text-secondary;
      span{
        margin-right: 8px;
        &:last-child{
          margin-right: 0;
        }
      }
      .author{
        display: inline-flex;
        align-items: center;
        color: $color-black;
        .fa{
          font-size: 16px;
          margin-right: 5px;
        }
      }
    }
    .foot{
      overflow: hidden;
      height: 0;
      transition: height .3s;
      .copyright,.desc{
        display: block;
        margin-top: 5px;
        font-size: 12px;
        color: $color-text-secondary;
      }
      .ban {
        color: $theme-color;
        font-size: 14px;
        margin-right: 3px;
      }
      .desc{
        line-height: 18px;
        white-space: pre-line;
      }
      .tags{
        margin-top: 10px;
        .vtag {
          margin: {
            right: 10px;
            bottom: 6px;
          }
          padding: 8px 18px;
          color: $color-text-regular;
          background-color: $color-grey;
          font-size: 12px;
        }
      }
    }
  }
</style>
